<html><head><meta charset="utf-8"><title>实战：使用 Stats 数据结构生成 Webpack 构建报告-慕课专栏</title>
			<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
			<meta name="renderer" content="webkit">
			<meta property="qc:admins" content="77103107776157736375">
			<meta property="wb:webmaster" content="c4f857219bfae3cb">
			<meta http-equiv="Access-Control-Allow-Origin" content="*">
			<meta http-equiv="Cache-Control" content="no-transform ">
			<meta http-equiv="Cache-Control" content="no-siteapp">
			<link rel="apple-touch-icon" sizes="76x76" href="https://www.imooc.com/static/img/common/touch-icon-ipad.png">
			<link rel="apple-touch-icon" sizes="120x120" href="https://www.imooc.com/static/img/common/touch-icon-iphone-retina.png">
			<link rel="apple-touch-icon" sizes="152x152" href="https://www.imooc.com/static/img/common/touch-icon-ipad-retina.png">
			<link href="https://moco.imooc.com/captcha/style/captcha.min.css" rel="stylesheet">
			<link rel="stylesheet" href="https://www.imooc.com/static/moco/v1.0/dist/css/moco.min.css?t=201907021539" type="text/css">
			<link rel="stylesheet" href="https://www.imooc.com/static/lib/swiper/swiper-3.4.2.min.css?t=201907021539">
			<link rel="stylesheet" href="https://static.mukewang.com/static/css/??base.css,common/common-less.css?t=2.5,column/zhuanlanChapter-less.css?t=2.5,course/inc/course_tipoff-less.css?t=2.5?v=201907051055" type="text/css">
			<link charset="utf-8" rel="stylesheet" href="https://www.imooc.com/static/lib/ueditor/themes/imooc/css/ueditor.css?v=201907021539"><link rel="stylesheet" href="https://www.imooc.com/static/lib/baiduShare/api/css/share_style0_16.css?v=6aba13f0.css"></head>
			<body><div id="main">

<div class="container clearfix" id="top" style="display: block; width: 1134px;">
    
    <div class="center_con js-center_con l" style="width: 1134px;">
        <div class="article-con">
                            <!-- 买过的阅读 -->
                <div class="map">
                    <a href="/read" target="_blank"><i class="imv2-feather-o"></i></a>
                    <a href="/read/29" target="_blank">Webpack 从零入门到工程化实战</a>
                    <a href="" target="_blank">
                        <span>
                            / 5-5 实战：使用 Stats 数据结构生成 Webpack 构建报告
                        </span>
                    </a>
                </div>

            


            <div class="art-title" style="margin-top: 0px;">
                实战：使用 Stats 数据结构生成 Webpack 构建报告
            </div>
            <div class="art-info">
                
                <span>
                    更新时间：2019-07-17 14:19:12
                </span>
            </div>
            <div class="art-top">
                                <img src="https://img4.mukewang.com/5cd964dc0001b9bb06400359.jpg" alt="">
                                                <div class="famous-word-box">
                    <img src="https://www.imooc.com/static/img/column/bg-l.png" alt="" class="bg1 bg">
                    <img src="https://www.imooc.com/static/img/column/bg-r.png" alt="" class="bg2 bg">
                    <div class="famous-word">完成工作的方法，是爱惜每一分钟。<p class="author">——达尔文</p></div>
                </div>
                            </div>
            <div class="art-content js-lookimg">
                <div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">上篇文章我们手写了一个 150 行左右的 dev-server 代码，在代码的最后我们使用了<code>Stats.toString</code>将本次打包的结果输出，效果如下图所示：</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;"><img src="http://img.mukewang.com/5d0845b3000114fd07110380.jpg" alt="图片描述" data-original="http://img.mukewang.com/5d0845b3000114fd07110380.jpg" class="" style="cursor: pointer;"><br>
这时候的终端输出的日志虽然内容可以看，但是对于重点内容还是不够突出。如果我们的项目变大之后，大量的静态资源文件就会导致日志过长，根本找不到我们想要的信息，例如下图：</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;"><img src="http://img.mukewang.com/5d0845d30001156304320954.png" alt="图片描述" data-original="http://img.mukewang.com/5d0845d30001156304320954.png" class="" style="cursor: pointer;"><br>
本篇文章将讲解如何通过 Stats 对象的数据结构找到想要的数据，并且做一个美化版的 Webpack 构建报告。</p>
</div><div class="cl-preview-section"><h2 id="stats-输出报告原理和实现步骤" style="font-size: 30px;">Stats 输出报告原理和实现步骤</h2>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">在之前的原理篇介绍 <a href="https://www.imooc.com/read/29/article/283">Compiler 和 Compilation 对象</a>时介绍过 Stats 对象的数据结构和 API。我们在 Webpack 打包的回调中，以及在<code>compiler.hooks.done</code>Hook 中只能拿到 Stats，所以我们只能通过 Stats 来拿到 Entry 编译后的 Chunks 关系，然后从 Entry 作为入口，查找 Chunks 的关系，找出一个页面用了多少资源（Assets），最终计算页面资源整体大小。对于页面资源超过推荐资源大小时，则特殊标红展现，最后将页面用到的所有资源都通过<a href="https://www.npmjs.com/package/tty-table">tty-table</a>展现表格。</p>
</div><div class="cl-preview-section"><h2 id="使用-stats-对象输出-webpack-构建报告" style="font-size: 30px;">使用 Stats 对象输出 Webpack 构建报告</h2>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;"><code>webpack/lib/Stats.js</code>，我们在手写 Plugin 用到的根据 Entry 查找 chunks 及其 prefetch 标识就是从<code>Stats.js</code>中找到的启发。下面开始我们的代码实现。</p>
</div><div class="cl-preview-section"><h3 id="获取-stats-对象">1. 获取 Stats 对象</h3>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">首先我们需要在上篇 dev-server 文章的代码基础上，在<code>webpack</code>的回调函数内或者在<code>compiler.hooks.done</code>的回调中，拿到 Stats 对象并且进行 Stats 数据对象转换，使用<code>stats.toJson</code>的方法，返回<code>Stats</code>的数据：</p>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js"><span class="token comment">// 两种方式获取 stats 对象</span>
<span class="token comment">// 方法 1：webpack 的回调中</span>
<span class="token keyword">const</span> webpack <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'webpack'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> webpackConfig <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./webpack.config.js'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 一顿操作猛如虎</span>
<span class="token function">webpack</span><span class="token punctuation">(</span>webpackConfig<span class="token punctuation">,</span> <span class="token punctuation">(</span>err<span class="token punctuation">,</span> stats<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token comment">// 错误信息</span>
        console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">return</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token comment">// 一顿操作猛如虎</span>
    stats <span class="token operator">=</span> stats<span class="token punctuation">.</span><span class="token function">toJson</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        all<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 全部禁用，手动开启，提升效率</span>
        entrypoints<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 输出 entry 信息</span>
        assets<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 输出 asseets 信息</span>
        chunks<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 输出 chunks 信息</span>
        version<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// webpack 版本信息</span>
        timings<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 打包用时</span>
        performance<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token comment">// 输出性能相关信息，主要是用到asset是否超过推荐大小 244kb</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token function">report</span><span class="token punctuation">(</span>stats<span class="token punctuation">,</span> webpackConfig<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 方法 2：在某些 hook 节点上，比如 compiler.hooks.done</span>
<span class="token keyword">const</span> compiler <span class="token operator">=</span> <span class="token function">webpack</span><span class="token punctuation">(</span>webpackConfig<span class="token punctuation">)</span><span class="token punctuation">;</span>
compiler<span class="token punctuation">.</span>hooks<span class="token punctuation">.</span>done<span class="token punctuation">.</span><span class="token function">tap</span><span class="token punctuation">(</span><span class="token string">'plugin name'</span><span class="token punctuation">,</span> stats <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>stats<span class="token punctuation">.</span><span class="token function">hasErrors</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token comment">// 错误信息</span>
        <span class="token keyword">const</span> info <span class="token operator">=</span> stats<span class="token punctuation">.</span><span class="token function">toJson</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span>info<span class="token punctuation">.</span>errors<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">return</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token comment">// 一顿操作猛如虎</span>
    stats <span class="token operator">=</span> stats<span class="token punctuation">.</span><span class="token function">toJson</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        all<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 全部禁用，手动开启，提升效率</span>
        entrypoints<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 输出 entry 信息</span>
        assets<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 输出 asseets 信息</span>
        chunks<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 输出 chunks 信息</span>
        version<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// webpack 版本信息</span>
        timings<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 打包用时</span>
        performance<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token comment">// 输出性能相关信息，主要是用到asset是否超过推荐大小 244kb</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token function">report</span><span class="token punctuation">(</span>stats<span class="token punctuation">,</span> webpackConfig<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">获取 Stats 对象之后，我们使用了<code>stats.toJson</code>方法将打包结果 Stats 数据输出为 JSON 对象，这时候传入了<code>report</code>函数，这个函数就是我们今天的重点实现。</p>
</div><div class="cl-preview-section"><h3 id="从-entry-中找出对应-chunk">2. 从 entry 中找出对应 chunk</h3>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">首先我们来复习下 Stats 对象的数据结构，Stats 的对象数据结构如下：</p>
</div><div class="cl-preview-section"><pre class="  language-json"><code class="prism  language-json"><span class="token punctuation">{</span>
    <span class="token string">"version"</span><span class="token punctuation">:</span> <span class="token string">"1.4.13"</span><span class="token punctuation">,</span> <span class="token comment">// webpack 版本</span>
    <span class="token string">"hash"</span><span class="token punctuation">:</span> <span class="token string">"11593e3b3ac85436984a"</span><span class="token punctuation">,</span> <span class="token comment">// Compilation 本次编译的 hash</span>
    <span class="token string">"time"</span><span class="token punctuation">:</span> <span class="token number">2469</span><span class="token punctuation">,</span> <span class="token comment">// 用时</span>
    <span class="token string">"outputPath"</span><span class="token punctuation">:</span> <span class="token string">"/"</span><span class="token punctuation">,</span> <span class="token comment">// webpack output 目录</span>
    <span class="token string">"entrypoints"</span><span class="token punctuation">:</span> <span class="token punctuation">[</span>
        <span class="token comment">// entry 对象数组</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token string">"assets"</span><span class="token punctuation">:</span> <span class="token punctuation">[</span>
        <span class="token comment">//  asset 对象数组</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token string">"chunks"</span><span class="token punctuation">:</span> <span class="token punctuation">[</span>
        <span class="token comment">// chunk 对象数组</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token string">"modules"</span><span class="token punctuation">:</span> <span class="token punctuation">[</span>
        <span class="token comment">//  module 对象数组</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token string">"errors"</span><span class="token punctuation">:</span> <span class="token punctuation">[</span>
        <span class="token comment">// 错误信息</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token string">"warnings"</span><span class="token punctuation">:</span> <span class="token punctuation">[</span>
        <span class="token comment">//  warning 信息</span>
    <span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">我们这次用到的是<code>entrypoints</code>、<code>assets</code>和<code>chunks</code>，三者的关系是：</p>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;"><code>entrypoints</code>：是入口文件对应的 bundle 信息，内部包含每个 bundle 包含的：
<ul>
<li style="font-size: 20px; line-height: 38px;"><code>name</code>：webpack.config.js 中 entry 配置 key 值，例如<code>config.entry = {main:'src/index.js'}</code>，那么这个 <code>entry</code> 的 <code>name</code> 是<code>main</code>；</li>
<li style="font-size: 20px; line-height: 38px;"><code>chunks</code>：是 bundle 包含的 chunkId 数组，可以通过 id 在 <code>stats.chunks</code>找到对应的 chunk；</li>
<li style="font-size: 20px; line-height: 38px;"><code>assets</code>：包含了 bundle 实际输出的 asset 资源信息，包括 JS 和 CSS 文件路径；</li>
<li style="font-size: 20px; line-height: 38px;"><code>children</code>/<code>childrenAssets</code>：包含的是可以异步拉取的 chunk 信息，例如「魔法注释」标示的<code>prefetch</code>、<code>preload</code>。</li>
</ul>
</li>
<li style="font-size: 20px; line-height: 38px;"><code>assets</code>：是输出的每个静态资源的信息，包含了资源的体积、路径、chunks 等信息，静态资源不仅仅是 JS 和 CSS，还包括了图片、字体等 Webpack 处理的资源；</li>
<li style="font-size: 20px; line-height: 38px;"><code>chunks</code>：chunk 对象数组，每个 chunk 对象包含了 id、name、files（assets 路径数组）、体积、parents（所属的父 chunk） 等信息。</li>
</ul>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">我们在<code>report</code>函数中首先做的事情是将每个<code>entrypoints</code>中的 chunks 进行分类，提取出来单个 entry 用到的 chunk 和公共 chunk，这些公共的 chunk 来自于我们的<code>splitChunks</code>配置。</p>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js"><span class="token keyword">function</span> <span class="token function">report</span><span class="token punctuation">(</span>stats<span class="token punctuation">,</span> webpackConfig<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 解构，获取变量</span>
    <span class="token keyword">let</span> <span class="token punctuation">{</span>assets<span class="token punctuation">,</span> entrypoints<span class="token punctuation">,</span> chunks<span class="token punctuation">}</span> <span class="token operator">=</span> stats<span class="token punctuation">;</span>
    <span class="token comment">// 记录唯一 chunkid</span>
    <span class="token keyword">const</span> uniChunksMap <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">// 记录公共 chunkId</span>
    <span class="token keyword">const</span> commonChunksIds <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">// 1. 找出 entry 中的自身包含的 chunkid，排除公共chunk 的 id</span>
    Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>entrypoints<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>name <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        entrypoints<span class="token punctuation">[</span>name<span class="token punctuation">]</span><span class="token punctuation">.</span>chunks<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span>chunkId <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
            <span class="token comment">// 存在，那么就是公共模块 id，添加进公共模块 ids</span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span>uniChunksMap<span class="token punctuation">.</span><span class="token function">has</span><span class="token punctuation">(</span>chunkId<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                commonChunksIds<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span>chunkId<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
                uniChunksMap<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span>chunkId<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">// 测试信息，输出 common chunk 对象</span>
    <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> chunkId <span class="token keyword">of</span> commonChunksIds<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>chunks<span class="token punctuation">[</span>chunkId<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">拿到 chunkId 那么我们就可以通过<code>chunks[chunkId]</code>来获取对应的 chunk 对象了。</p>
</div><div class="cl-preview-section"><h3 id="将每个-entry-的资源进行分类">3. 将每个 entry 的资源进行分类</h3>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">下面我们将再次遍历 <code>entrypoints</code>数组，得到一个新的数组<code>entries</code>，里面包含了：</p>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js">entries <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
    name<span class="token punctuation">,</span> <span class="token comment">// entry 的 name</span>
    assets<span class="token punctuation">,</span> <span class="token comment">// entry 的 assets 值，即包含的资源，主要是entry 执行首次必须加载的JS 和 CSS 依赖文件，会被标记为 link 类型</span>
    prefetchAssets<span class="token punctuation">,</span> <span class="token comment">// prefetch 的资源，会被标记为 prefetch 类型</span>
    preloadAssets<span class="token punctuation">,</span> <span class="token comment">//   preload 的资源，会被标记为 preload 类型</span>
    asyncAssets<span class="token punctuation">;</span> <span class="token comment">// 按需加载（异步模块）打包出来的 chunk 资源，会被标记为 async 类型</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token comment">//...</span>
<span class="token punctuation">]</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">这样我们一个 entry（或者称为<strong>一个页面</strong>更好理解）要加载，必须引入 <code>assets</code> 的 JS 和 CSS 文件，然后异步加载的资源根据类型不同，分别放在<code>prefetchAssets</code>、<code>preloadAssets</code>和<code>asyncAssets</code>，这样分类的好处是：</p>
</div><div class="cl-preview-section"><ol>
<li style="font-size: 20px; line-height: 38px;">
<p style="font-size: 20px; line-height: 38px;">很清晰地标示了不同类型资源的加载顺序和重要程度；</p>
</li>
<li style="font-size: 20px; line-height: 38px;">
<p style="font-size: 20px; line-height: 38px;">可以针对不同类型的资源进行不同的加载策略，这个在<a href="https://www.imooc.com/read/29/article/289">《手写 Plugin》</a>文章已经介绍过 prefetch 的实现方式，跟这里前后呼应；</p>
</li>
<li style="font-size: 20px; line-height: 38px;">
<p style="font-size: 20px; line-height: 38px;">根据不同类型的资源与不同的加载策略，可以做一些分析工作。比如本文主要分析的是每个 entry（页面）初始化时需要的代码体积有什么不同，通过列出体积表格来帮我们判定页面首次加载用到的资源是否过大。</p>
</li>
</ol>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js"><span class="token keyword">function</span> <span class="token function">report</span><span class="token punctuation">(</span>stats<span class="token punctuation">,</span> webpackConfig<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 解构，获取变量</span>
    <span class="token keyword">let</span> <span class="token punctuation">{</span>assets<span class="token punctuation">,</span> entrypoints<span class="token punctuation">,</span> chunks<span class="token punctuation">}</span> <span class="token operator">=</span> stats<span class="token punctuation">;</span>
    <span class="token comment">// 记录唯一 chunkid</span>
    <span class="token keyword">const</span> uniChunksMap <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">// 记录公共 chunkId</span>
    <span class="token keyword">const</span> commonChunksIds <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token comment">// ... 忽略之前的代码</span>
    <span class="token comment">// 2. 对 entries 的资源进行分类</span>
    <span class="token keyword">const</span> entries <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>entrypoints<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>name <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">const</span> entry <span class="token operator">=</span> entrypoints<span class="token punctuation">[</span>name<span class="token punctuation">]</span><span class="token punctuation">;</span>
        <span class="token keyword">const</span> <span class="token punctuation">{</span>prefetch <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> preload <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">}</span> <span class="token operator">=</span> entry<span class="token punctuation">.</span>children<span class="token punctuation">;</span>

        <span class="token keyword">let</span> prefetchChunks <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
        <span class="token keyword">let</span> preloadChunks <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
        <span class="token keyword">const</span> prefetchAssets <span class="token operator">=</span> <span class="token function">flatten</span><span class="token punctuation">(</span>
            prefetch<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">{</span>chunks<span class="token punctuation">,</span> assets<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
                prefetchChunks<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token operator">...</span>chunks<span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token keyword">return</span> <span class="token function">getAssetsFiles</span><span class="token punctuation">(</span>assets<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">const</span> preloadAssets <span class="token operator">=</span> <span class="token function">flatten</span><span class="token punctuation">(</span>
            preload<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">{</span>chunks<span class="token punctuation">,</span> assets<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
                preloadChunks<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token operator">...</span>chunks<span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token keyword">return</span> <span class="token function">getAssetsFiles</span><span class="token punctuation">(</span>assets<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token punctuation">)</span><span class="token punctuation">;</span>

        <span class="token keyword">const</span> asyncChunks <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

        entry<span class="token punctuation">.</span>chunks<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span>chunkId <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>commonChunksIds<span class="token punctuation">.</span><span class="token function">has</span><span class="token punctuation">(</span>chunkId<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token comment">// 2. 非公共模块则查找他的 children</span>
                <span class="token comment">// 这是因为公共模块查找出出来的 children 是依赖公共模块的全部依赖，所以不能说明是当前 entry 依赖到的模块，会导致计算不准确</span>
                <span class="token keyword">const</span> children <span class="token operator">=</span> chunks<span class="token punctuation">[</span>chunkId<span class="token punctuation">]</span><span class="token punctuation">.</span>children<span class="token punctuation">;</span>
                <span class="token keyword">if</span> <span class="token punctuation">(</span>children<span class="token punctuation">.</span>length<span class="token punctuation">)</span> <span class="token punctuation">{</span>
                    asyncChunks<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>
                        <span class="token operator">...</span><span class="token function">flatten</span><span class="token punctuation">(</span>
                            children
                                <span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>
                                    chunkId <span class="token operator">=&gt;</span> <span class="token operator">!</span><span class="token operator">~</span>prefetchChunks<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>chunkId<span class="token punctuation">)</span> <span class="token operator">&amp;&amp;</span> <span class="token operator">!</span><span class="token operator">~</span>preloadChunks<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>chunkId<span class="token punctuation">)</span>
                                <span class="token punctuation">)</span>
                                <span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>chunkId <span class="token operator">=&gt;</span> <span class="token function">getAssetsFiles</span><span class="token punctuation">(</span>chunks<span class="token punctuation">[</span>chunkId<span class="token punctuation">]</span><span class="token punctuation">.</span>files<span class="token punctuation">)</span><span class="token punctuation">)</span>
                        <span class="token punctuation">)</span>
                    <span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">return</span> <span class="token punctuation">{</span>
            name<span class="token punctuation">,</span>
            assets<span class="token punctuation">:</span> entry<span class="token punctuation">.</span>assets<span class="token punctuation">,</span>
            prefetchAssets<span class="token punctuation">,</span>
            preloadAssets<span class="token punctuation">,</span>
            asyncAssets<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span>asyncChunks<span class="token punctuation">)</span><span class="token punctuation">]</span>
        <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">// 看下现在的结果</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>entries<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
</div><div class="cl-preview-section"><h3 id="对-assets-进行重新处理">4. 对 assets 进行重新处理</h3>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">在这一步，我们主要做的事情是遍历 assets 对象，提取 assets 中的 JS 和 CSS 文件，毕竟 JS 和 CSS 影响页面加载速度更严重一些，而且不好优化。另外，通过遍历 assets 对象，我们创建一个<code>assetsMap</code>，可以通过 <code>asset</code> 的 <code>name</code>（这里的 name 实际就是对应着上面 entries 数组中每个 entry 的 asset 路径） 获取 <code>asset</code> 的对象：</p>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js"><span class="token keyword">const</span> <span class="token function-variable function">isJS</span> <span class="token operator">=</span> val <span class="token operator">=&gt;</span> <span class="token regex">/\.js$/</span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>val<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">isCSS</span> <span class="token operator">=</span> val <span class="token operator">=&gt;</span> <span class="token regex">/\.css$/</span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>val<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">report</span><span class="token punctuation">(</span>stats<span class="token punctuation">,</span> webpackConfig<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 解构，获取变量</span>
    <span class="token keyword">let</span> <span class="token punctuation">{</span>assets<span class="token punctuation">,</span> entrypoints<span class="token punctuation">,</span> chunks<span class="token punctuation">}</span> <span class="token operator">=</span> stats<span class="token punctuation">;</span>
    <span class="token comment">// ... 忽略之前的代码</span>
    <span class="token comment">// 3. 整理 assets 对象，创建可以通过`asset`的`name`获取`asset`的assetsMap</span>
    <span class="token keyword">const</span> assetsMap <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Map</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// eslint-disable-line no-undef</span>
    <span class="token comment">// 只提取 js 和 css</span>
    assets <span class="token operator">=</span> assets<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>a <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">isJS</span><span class="token punctuation">(</span>a<span class="token punctuation">.</span>name<span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token function">isCSS</span><span class="token punctuation">(</span>a<span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">const</span> name <span class="token operator">=</span> a<span class="token punctuation">.</span>name<span class="token punctuation">;</span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span>assetsMap<span class="token punctuation">.</span><span class="token function">has</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
            <span class="token comment">// 标识下 common 的模块类型</span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span>a<span class="token punctuation">.</span>chunks<span class="token punctuation">.</span>length <span class="token operator">===</span> <span class="token number">1</span> <span class="token operator">&amp;&amp;</span> commonChunksIds<span class="token punctuation">.</span><span class="token function">has</span><span class="token punctuation">(</span>a<span class="token punctuation">.</span>chunks<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                a<span class="token punctuation">.</span>type <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'common'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
                a<span class="token punctuation">.</span>type <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
            assetsMap<span class="token punctuation">.</span><span class="token keyword">set</span><span class="token punctuation">(</span>name<span class="token punctuation">,</span> <span class="token punctuation">{</span>
                <span class="token operator">...</span>a<span class="token punctuation">,</span>
                gzippedSize<span class="token punctuation">:</span> <span class="token function">getGzippedSize</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token comment">// 处理 entry 合并计算资源大小</span>
            <span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">第三步，我们需要从<code>chunks</code>中找到 Webpack Entry 的入口文件，这里使用了<code>chunk</code>对象的<code>chunk.entry</code>。如果是 Entry 类型的 chunk，则可以通过下面代码筛选出来：</p>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js"><span class="token keyword">const</span> chunks <span class="token operator">=</span> json<span class="token punctuation">.</span>chunks<span class="token punctuation">;</span>
<span class="token comment">// 查找出来 entry 的文件</span>
<span class="token keyword">const</span> entries <span class="token operator">=</span> chunks<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>chunk <span class="token operator">=&gt;</span> chunk<span class="token punctuation">.</span>entry<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">第四步，我们可以从 Entry 的<code>chunk</code>对象里面获取包含的全部 chunk 的 asset 对象。<code>chunk</code>对象中有<code>files</code>、<code>siblings</code>和<code>children</code>：</p>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;"><code>files</code>：</li>
<li style="font-size: 20px; line-height: 38px;"><code>siblings</code>：</li>
<li style="font-size: 20px; line-height: 38px;"><code>children</code>：</li>
</ul>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js"><span class="token keyword">function</span> <span class="token function">getAssetsFiles</span><span class="token punctuation">(</span>files <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> files<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>file <span class="token operator">=&gt;</span> <span class="token function">isJS</span><span class="token punctuation">(</span>file<span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token function">isCSS</span><span class="token punctuation">(</span>file<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
entries<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">{</span>files<span class="token punctuation">,</span> siblings<span class="token punctuation">,</span> children<span class="token punctuation">,</span> names<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    files <span class="token operator">=</span> <span class="token function">getAssetsFiles</span><span class="token punctuation">(</span>files<span class="token punctuation">)</span><span class="token punctuation">;</span>
    siblings<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span>id <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>chunks<span class="token punctuation">[</span>id<span class="token punctuation">]</span><span class="token punctuation">.</span>files<span class="token punctuation">.</span>length<span class="token punctuation">)</span> <span class="token punctuation">{</span>
            files<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token operator">...</span><span class="token function">getAssetsFiles</span><span class="token punctuation">(</span>chunks<span class="token punctuation">[</span>id<span class="token punctuation">]</span><span class="token punctuation">.</span>files<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    children<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span>id <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>chunks<span class="token punctuation">[</span>id<span class="token punctuation">]</span><span class="token punctuation">.</span>files<span class="token punctuation">.</span>length<span class="token punctuation">)</span> <span class="token punctuation">{</span>
            files<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token operator">...</span><span class="token function">getAssetsFiles</span><span class="token punctuation">(</span>chunks<span class="token punctuation">[</span>id<span class="token punctuation">]</span><span class="token punctuation">.</span>files<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
        name<span class="token punctuation">:</span> names<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">'-'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        files<span class="token punctuation">:</span> files<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>file <span class="token operator">=&gt;</span> assetsMap<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span>file<span class="token punctuation">)</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><h2 id="总结" style="font-size: 30px;">总结</h2>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">通过本篇文章不仅可以美化 log，还可以让我们熟悉 Stats 的结构。</p>
</div></div>
            </div>
                            <!-- 买过的阅读 -->
                <div class="art-next-prev clearfix">
                                                                        <!-- 已买且开放 或者可以试读 -->
                            <a href="/read/29/article/290">
                                                    <div class="prev l clearfix">
                                <div class="icon l">
                                    <i class="imv2-arrow3_l"></i>
                                </div>
                                <p>
                                    实战：使用 Express 和中间件来实现 Webpack-dev-server
                                </p>
                            </div>
                        </a>
                                                                                            <!-- 已买且开放 或者可以试读 -->
                            <a href="/read/29/article/292">
                                                    <div class="next r clearfix">
                                <p>
                                    实战：给 Webpack 项目添加 modern 模式打包
                                </p>
                                <div class="icon r">
                                    <i class="imv2-arrow3_r"></i>
                                </div>

                            </div>
                        </a>
                                    </div>
                    </div>
        <div class="comments-con js-comments-con" id="coments_con">     <div class="number">精选留言 <span class="js-number">0</span></div>     <div class="comments">         <div class="input-fake js-showcommentModal">             欢迎在这里发表留言，作者筛选后可公开显示         </div>                      <div class="noData">                 <p>                     <i class="imv2-error_c"></i>                 </p>                 <p>目前暂无任何讨论</p>             </div>              </div>  </div>



    </div>
    
    
    

</div>
 
<!-- 专栏介绍页专栏评价 -->

<!-- 专栏介绍页底部三条评价 -->

<!-- 专栏阅读页弹层目录和介绍页页面目录 -->

<!-- 专栏阅读页发布回复 -->

<!-- 专栏阅读页发布评论 -->

<!-- 专栏阅读页底部评论 -->

<!-- 专栏阅读 单个 评论 -->

<!-- 新增回复和展开三条以外回复 -->

<!-- 立即订阅的弹窗 -->












</div></body></html>